<template>
  <el-row :gutter="12">
    <el-col :span="isRange ? 24 : 12">
      <el-select
          v-model="cloneData.type"
          size="small"
          placeholder="请选择"
          style="width:100%;"
          @change="change.type"
      >
        <el-option label="早于" value="lt"></el-option>
        <el-option label="早于等于" value="lte"></el-option>
        <el-option label="晚于" value="gt"></el-option>
        <el-option label="晚于等于" value="gte"></el-option>
        <el-option label="等于" value="eq"></el-option>
        <el-option label="介于两个日期之间" value="bet"></el-option>
      </el-select>
    </el-col>
    <el-col :span="isRange ? 24 : 12">
      <el-date-picker
          @change="change.value"
          v-if="!isRange"
          size="small"
          style="width:100%;"
          v-model="cloneData.value"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
      />
      <div style="width:100%;overflow:hidden;margin-top:10px;display: flex;align-items: center" v-else>
        <el-col :span="6" style="padding:0;">
          <el-date-picker
              @change="change.value0"
              size="small"
              v-model="cloneData.value[0]"
              type="date"
              placeholder="选择日期"
              style="width:100%;"
              value-format="YYYY-MM-DD"
          />
        </el-col>
        <el-col :span="4">
          <el-select @change="change.value1" v-model="cloneData.value[1]" size="small" placeholder="请选择">
            <el-option label="<" value="lt"></el-option>
            <el-option label="≤" value="lte"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4" class="range-title" :title="title">{{ title }}</el-col>
        <el-col :span="4">
          <el-select @change="change.value2" v-model="cloneData.value[2]" size="small" placeholder="请选择">
            <el-option label="<" value="lt"></el-option>
            <el-option label="≤" value="lte"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6" style="padding:0;">
          <el-date-picker
              @change="change.value3"
              size="small"
              v-model="cloneData.value[3]"
              type="date"
              placeholder="选择日期"
              style="width:100%;"
              value-format="YYYY-MM-DD"
          />
        </el-col>
      </div>
    </el-col>
  </el-row>
</template>
<script setup name="DateInput">
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  },
  title: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['update:modelValue']);
const cloneData = computed({
  get() {
    return props.modelValue || {};
  },
  set(val) {
    emit('update:modelValue', val);
  }
});
const isRange = computed(() => cloneData.value.type === 'bet');
const change = {
  type(val) {
    let cvalue = JSON.parse(JSON.stringify(cloneData.value));
    cvalue['type'] = val;
    if (val === 'bet') {
      cvalue.value = [new Date(), 'lt', 'lt', new Date()];
    } else {
      cvalue['value'] = new Date();
    }
    cloneData.value = cvalue;
  },
  value(val) {
    let cvalue = JSON.parse(JSON.stringify(cloneData.value));
    cvalue['value'] = val;
    cloneData.value = cvalue;
  },
  value0(val) {
    let cvalue = JSON.parse(JSON.stringify(cloneData.value));
    cvalue['value'][0] = val;
    cloneData.value = cvalue;
  },
  value1(val) {
    let cvalue = JSON.parse(JSON.stringify(cloneData.value));
    cvalue['value'][1] = val;
    cloneData.value = cvalue;
  },
  value2(val) {
    let cvalue = JSON.parse(JSON.stringify(cloneData.value));
    cvalue['value'][2] = val;
    cloneData.value = cvalue;
  },
  value3(val) {
    let cvalue = JSON.parse(JSON.stringify(cloneData.value));
    cvalue['value'][3] = val;
    cloneData.value = cvalue;
  }
};
onMounted(() => {
});
</script>
<style lang="scss" scoped>
// 三点省略 支持单行多行
// Mixin { n:Number } n：省略行数限制
@mixin ellipsis($n) {
  overflow: hidden;
  text-overflow: ellipsis;
  @if ($n > 1) {
    display: -webkit-box;
    -webkit-line-clamp: $n;
    -webkit-box-orient: vertical;
  } @else {
    white-space: nowrap;
  }
}
.cmp-container {
  line-height: 30px;
  padding: 10px;
  :deep(.el-input--small .el-input__inner) {
    padding-left: 10px;
    padding-right: 15px;
  }
  :deep(.el-input-number.is-controls-right .el-input__inner) {
    padding-left: 15px;
    padding-right: 0;
    text-align: left;
  }
  :deep(.el-input:hover .el-input__inner) {
    border-color: #529eff;
  }
}
.label {
  font-size: 12px;
  padding-right: 16px !important;
  @include ellipsis(2);
}
.range-title {
  font-size: 12px;
  text-align: center;
  @include ellipsis(1);
}
.icon-wrapper {
  i {
    cursor: pointer;
    color: #c5c5c5;
    &:hover {
      color: #333;
    }
  }
}
</style>
